{% extends "base.html" %}
{% block content %}
{% load static %}
<div class="mb-3">
    <button onclick="printAllQRCodes()" class="btn btn-primary">批量打印二维码</button>
</div>

<table class="table">
    <thead>
        <tr>
            <th>食品名称</th>
            <th>生产日期</th>
            <th>保质期</th>
            <th>过期日期</th>
            <th>剩余天数</th>
            <th>二维码</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% for food in foods %}
        <tr>
            <td>{{ food.name }}</td>
            <td>{{ food.production_date|date:"Y年m月d日" }}</td>
            <td>{{ food.shelf_life }}天</td>
            <td>{{ food.expiration_date|date:"Y年m月d日" }}</td>
            <td class="days-left" data-days-left="{{ food.days_left }}">
                <!-- 这里会由 JavaScript 动态填充 -->
            </td>
            <td>
                <!-- 显示二维码 -->
                {% if food.qr_code %}
                    <img src="{{ food.qr_code.url }}" width="100" alt="二维码" class="qr-code" data-food-name="{{ food.name }}">
                {% else %}
                    <span>无二维码</span>
                {% endif %}
            </td>
            <td>
                <form method="post" action="{% url 'delete_food' food.id %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger btn-sm">删除</button>
                </form>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<!-- 批量打印的模态框 -->
<div id="printModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">批量打印二维码</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="printContent">
                <!-- 这里会动态加载所有二维码和食品名称 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="printQRCodes()">打印</button>
            </div>
        </div>
    </div>
</div>

<!-- 引入 Bootstrap JS -->
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>

<script>
    // 将毫秒转换为天数的函数
    function millisecondsToDays(milliseconds) {
        return Math.floor(milliseconds / (1000000 * 60 * 60 * 24)); // 毫秒 -> 天
    }

    // 动态更新剩余天数
    function updateDaysLeft() {
        const daysLeftCells = document.querySelectorAll('.days-left');
        daysLeftCells.forEach(cell => {
            const milliseconds = parseFloat(cell.getAttribute('data-days-left')); // 获取毫秒数
            const days = millisecondsToDays(milliseconds); // 转换为天数
            if (days < 0) {
                cell.innerHTML = '<span class="text-danger">已过期</span>'; // 已过期
            } else {
                cell.textContent = `${days}天`; // 显示剩余天数
            }
        });
    }

    // 页面加载后执行
    document.addEventListener('DOMContentLoaded', updateDaysLeft);

    // 批量打印二维码功能
    function printAllQRCodes() {
        const qrCodes = document.querySelectorAll('.qr-code');
        const printContent = document.getElementById('printContent');
        printContent.innerHTML = ''; // 清空内容

        // 将所有二维码和食品名称添加到模态框中
        qrCodes.forEach(qrCode => {
            const container = document.createElement('div');
            container.style.textAlign = 'center'; // 居中显示
            container.style.margin = '10px'; // 设置间距

            // 添加二维码图片
            const img = document.createElement('img');
            img.src = qrCode.src;
            img.style.width = '150px'; // 设置二维码大小
            container.appendChild(img);

            // 添加食品名称
            const foodName = document.createElement('p');
            foodName.textContent = qrCode.getAttribute('data-food-name');
            foodName.style.marginTop = '5px'; // 名称与二维码的间距
            foodName.style.fontSize = '14px'; // 设置字体大小
            container.appendChild(foodName);

            printContent.appendChild(container);
        });

        // 显示模态框
        const printModal = new bootstrap.Modal(document.getElementById('printModal'));
        printModal.show();
    }

    // 打印二维码
    function printQRCodes() {
        const printContent = document.getElementById('printContent').innerHTML;
        const originalContent = document.body.innerHTML;

        // 替换页面内容为二维码和食品名称
        document.body.innerHTML = printContent;
        window.print(); // 调用打印功能

        // 恢复原始页面内容
        document.body.innerHTML = originalContent;
        window.location.reload(); // 刷新页面以恢复状态
    }
</script>
{% endblock %}